<template>
  <div id="publicRoleCustomAuthority" class="fit" >
    {{role.length > 0 ? '': $router.push({name: 'similarAuthority'})}}
    <ta-border-layout :layout="{header:'55px'}" v-if="role.length">
      <template slot="header">
        <ta-breadcrumb separator=">" style="line-height: 30px">
          <ta-breadcrumb-item><a @click="$router.push({name: 'similarAuthority'})">相似权限管理</a></ta-breadcrumb-item>
          <ta-breadcrumb-item>相似权限授权</ta-breadcrumb-item>
        </ta-breadcrumb>
      </template>
      <ta-alert :message="'当前角色为：'+ getNames() " type="info" showIcon class="notice-box"/>
      <ta-tabs class="fit content-box">
        <template slot="tabBarExtraContent">
          <ta-button-group>
            <ta-button @click="$router.push({name: 'similarAuthority'})">返回相似权限管理</ta-button>
          </ta-button-group>
        </template>
        <ta-tab-pane tab="相似权限">
          <ta-row class="fit">
            <ta-col :span="4" class="fit" style="border-right:1px solid #eee">
              <div class="menu-title">
                <ta-icon type="menu-fold"></ta-icon>
                <span style="margin-left: 5px;">相似权限一级菜单</span>
              </div>
              <ta-divider style="margin: 0"></ta-divider>
              <ta-menu mode="inline" :selectedKeys="menuSelectedKeys" @click="onSelectMenu">
                <ta-menu-item :key="item.resourceId" v-for="item in menuData">
                  <ta-icon type="appstore"/>
                  {{item.name}}
                </ta-menu-item>
              </ta-menu>
            </ta-col>
            <ta-col :span="20" class="right-box">
              <div class="info-box">
                <div class="col-header">可授权的自定义对象</div>
                <div class="divider"></div>
                <div class="search-box">
                  <ta-input placeholder="输入关键字进行过滤" v-model="filterText" style="width: 250px;"/>
                  <ta-button type="primary" @click="saveAuthority" class="button-save">权限保存</ta-button>
                </div>
                <div class="tree-box">
                  <ta-e-tree :data="treeData" @check-change="treeCheck" show-checkbox :expand-on-click-node="false" :default-expand-all="true" highlight-current node-key="resourceId" :props="defaultProps" ref="roleTree" :filter-node-method="filterNode">
                    <div slot-scope="{ node, data }">
                      <span>{{data.name}}</span>
                      <ta-checkbox-group class="grant-checkbox" v-if="data.restUrlAuthorityPoList.length" :ref="data.restUrlAuthorityPoList[0].resourceId">
                        <ta-checkbox v-for="item in data.restUrlAuthorityPoList" :value="item.urlId" :key="item.urlId" @click="onChangeCheckbox($event,item)">{{item.urlName}}</ta-checkbox>
                      </ta-checkbox-group>
                    </div>
                  </ta-e-tree>
                </div>
              </div>
            </ta-col>
          </ta-row>
        </ta-tab-pane>
      </ta-tabs>
    </ta-border-layout>
  </div>
</template>
<script>
  import api from '../api/index'
  export default {
    name: '',
    data() {
      return {
        menuSelectedKeys: [],
        menuData: [],
        treeData: [],
        roleIds: [],
        defaultProps: { // 菜单组织结构
          children: 'children',
          label: 'name',
          isLeaf: 'isLeaf'
        },
        filterText: '',
        grantCheckbox: [],
        resourceId: ''
      }
    },
    watch: {
      filterText(val) {
        this.$refs.roleTree.filter(val);
      }
    },
    computed: {
      role() {
        return this.$route.params
      },
      grantCheckUrlIDs() {
        let result = []
        this.grantCheckbox.map((item)=>{
          result.push(item.urlId)
        })
        return result
      }
    },
    mounted() {
      this.queryOne()
    },
    methods: {
      filterNode(value, data){
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      getNames(){
        let names = [], roleIds = []
        this.role.map((item)=>{
          names.push(item.roleName)
          roleIds.push(item.roleId)
        })
        this.roleIds = roleIds
        return names.join("、")
      },
      queryOne(){
        api.queryRePermissionResource(this, null, (data) => {
          this.menuData = data.customRePermissions
          this.menuSelectedKeys = [this.menuData[0].resourceId];
          this.queryTwo(this.menuData[0].resourceId)
        });
      },
      queryTwo(resourceId){
        api.queryRePermissionResource(this, {resourceId: resourceId}, (data) => {
          this.treeData = data.customRePermissions
        });
      },
      onSelectMenu({item, key, keyPath}){
        let resourceIds = this.$refs.roleTree.getCheckedKeys()
        let urlIds = this.grantCheckUrlIDs
        this.resourceId = key
        if(resourceIds.length || urlIds.length){
          this.$confirm({
            title: '提示',
            content: '当前相似权限修改未保存，是否保存?',
            cancelText: '取消',
            okText: '确认',
            onOk: () => {
              this.saveAuthority();
            },
            onCancel:()=>{
              this.grantCheckbox = []
              this.filterText = ''
              this.menuSelectedKeys = keyPath;
              this.queryTwo(key)
            }
          });
        } else {
          this.grantCheckbox = []
          this.filterText = ''
          this.menuSelectedKeys = keyPath;
          this.queryTwo(key)
        }
      },
      treeCheck(checkedNodes,checked){
        let urlList = checkedNodes.restUrlAuthorityPoList, urlRefs = this.$refs[checkedNodes.resourceId]
        if(urlList.length){
          urlRefs.$children.map((item) => {
            if((this.grantCheckUrlIDs.indexOf(item.value) == -1) === checked){
              item.$el.click();
            }
          })
        }
      },
      onChangeCheckbox($event,item){
        let checked = $event.target.checked
        if(checked){
          this.grantCheckbox.push({'resourceId': item.resourceId, 'urlId': item.urlId })
        } else {
          this.grantCheckbox = this.grantCheckbox.filter((i)=> i.urlId != item.urlId)
        }
      },
      saveAuthority(){
        let resourceIds = this.$refs.roleTree.getCheckedKeys()
        let jsonArray = this.grantCheckbox
        let param = {roleIds: this.roleIds.join(','), resourceIds: resourceIds.join(','), resourceId: this.resourceId, jsonArray: JSON.stringify(jsonArray)}
        api.addBatchSimilarAuthority(this, param, (data) => {
          if (data.errors == null) {
            this.$message.success("授权成功");
          }
        });
      },
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .menu-title { height: 39px; line-height: 39px; width: 100%; padding: 0 0 0 25px; overflow: hidden }
  .notice-box { float: right; width: 100%; }
  .content-box { padding-top: 40px; overflow: visible; }
  .right-box { height: 100%; padding: 10px; }
  .info-box { width: 100%; height: 100%; border: solid 1px #e8e8e8; position: relative;}
  .col-header { text-align: center; line-height: 50px; border-bottom: solid 1px #e8e8e8 }
  .search-box { margin: 5px 10px}
  .tree-box { position: absolute; top: 95px; left: 10px; right: 10px; bottom: 10px; overflow: auto; @include beautifyScrollbar(); }
  .button-save { float: right }
  .grant-checkbox { margin-left: 30px; }
</style>
